import { useGlobalStore } from "@/stores/modules/global";
import { BASE_TITLE } from "@/config";
import { ElAside, ElMenu, ElScrollbar } from "element-plus";
import { computed, defineComponent, ref } from "vue";
import { useMenuStore } from "@/stores/modules/menu";
import { useRoute, useRouter } from "vue-router";
import "./aside.scss";
import SubMenu from "./components/SubMenu/SubMenu";
export default defineComponent({
  name: "base_aside",
  setup(_props, _ctx) {
    const menuStore = useMenuStore();
    const globalStore = useGlobalStore();
    const menuList = computed(() => menuStore.showMenuListGet);
    const route = useRoute();
    const router = useRouter();
    const isCollapse = computed(() => globalStore.isCollapse);
    const isLogoShow = ref<boolean>(true);
    const activeMenu = computed(
      () =>
        (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string
    );

    const onSelect = (data: string) => {
      router.push({ path: data });
    };

    const useImportImage = (path: string) => {
      return new URL(path, import.meta.url).href;
    };
    return () => {
      return (
        <>
          {/* 左侧 */}
          <ElAside class="aside">
            <div
              class="aside-box"
              style={{ width: isCollapse.value ? "65px" : "210px" }}
            >
              {/* 左侧logo */}
              {isLogoShow.value && (
                <div class="logo">
                  {isCollapse.value ? (
                    <span class="logo-text">
                      <img
                        class="logo-img"
                        src={
                          new URL(`@/assets/jump.gif`, import.meta.url)
                            .href
                        }
                        alt="logo"
                      />
                      {/* <img
                        class="logo-img"
                        src={useImportImage("@/assets/vite.svg")}
                        alt="logo"
                      /> */}
                    </span>
                  ) : (
                    <div class="txt">
                      <img
                        class="logo-img"
                        src={
                          new URL(`@/assets/jump.gif`, import.meta.url)
                            .href
                        }
                        alt="logo"
                      />
                      <span class="txts">{BASE_TITLE}</span>
                    </div>
                  )}
                </div>
              )}

              {/* 左侧菜单 */}
              <ElScrollbar class="el-scrollbar">
                <ElMenu
                  class="el-menu"
                  defaultActive={activeMenu.value}
                  onSelect={onSelect}
                  collapse={isCollapse.value}
                >
                  <SubMenu menuList={menuList.value} />
                </ElMenu>
              </ElScrollbar>
            </div>
          </ElAside>
        </>
      );
    };
  },
});
